<template>
  <component is="a-drawer" v-model:visible="visible" width="65%" :title="title" :footer="false">
    <!-- 表单信息 start -->

    <a-descriptions :column="2" bordered>
      <a-descriptions-item :span="2" label="头像">
        <a-avatar :size="64" :image-url="formData.avatar" shape="square"></a-avatar>
      </a-descriptions-item>
      <a-descriptions-item label="用户余额"
        ><span class="text-red-500">￥{{ formData.user_money }}</span></a-descriptions-item
      >
      <a-descriptions-item label="累计充值"
        ><span class="text-red-500">￥{{ formData.total_recharge_amount }}</span></a-descriptions-item
      >
    </a-descriptions>

    <a-tabs default-active-key="1" class="mt-4">
      <a-tab-pane key="1" title="用户信息">
        <a-divider orientation="left">基本信息</a-divider>
        <a-descriptions :column="3" class="p-4" :value-style="{ width: '33.3%' }">
          <a-descriptions-item label="用户ID">{{ formData.id }}</a-descriptions-item>
          <a-descriptions-item label="账号">{{ formData.account }}</a-descriptions-item>
          <a-descriptions-item label="昵称">{{ formData.nickname }}</a-descriptions-item>
          <a-descriptions-item label="姓名">{{ formData.real_name }}</a-descriptions-item>
          <a-descriptions-item label="手机">{{ formData.mobile }}</a-descriptions-item>
          <a-descriptions-item label="邮箱">{{ formData.email }}</a-descriptions-item>
          <a-descriptions-item label="性别">
            <sa-dict :value="formData.sex" dict="gender"></sa-dict>
          </a-descriptions-item>
          <a-descriptions-item label="生日">{{ formData.birthday }}</a-descriptions-item>
          <a-descriptions-item label="注册渠道">
            <sa-dict :value="formData.channel" dict="register_channel"></sa-dict>
          </a-descriptions-item>
        </a-descriptions>
        <a-divider orientation="left">用户概况</a-divider>
        <a-descriptions :column="2" class="p-4">
          <a-descriptions-item label="新用户">{{ formData.is_new_user == 1 ? '是' : '否' }}</a-descriptions-item>
          <a-descriptions-item label="注册时间">{{ formData.create_time }}</a-descriptions-item>
          <a-descriptions-item label="登录IP">{{ formData.login_ip }}</a-descriptions-item>
          <a-descriptions-item label="登录时间">{{ formData.login_time }}</a-descriptions-item>
        </a-descriptions>
        <a-divider orientation="left">位置信息</a-divider>
        <a-descriptions :column="2" class="p-4">
          <a-descriptions-item label="用户地址" :span="2">{{ formData.user_address }}</a-descriptions-item>
          <a-descriptions-item label="经度">{{ formData.latitude }}</a-descriptions-item>
          <a-descriptions-item label="纬度">{{ formData.longitude }}</a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>
      <a-tab-pane key="2" title="消费记录">
        <div>
          <a-table :columns="orderColumn" :data="orderData.data" :pagination="false">
            <template #order_no="{ record }">
              <p class="text-xs">{{ record.create_time }}</p>
              <p class="text-xs">{{ record.order_no }}</p>
            </template>
            <template #cover_image="{ record }">
              <a-avatar :size="48" :image-url="record.cover_image" shape="square"></a-avatar>
            </template>
            <template #goods_name="{ record }">
              <p class="text-wrap line-clamp-2 text-xs">{{ record.goods_name }}</p>
            </template>
            <template #order_type="{ record }">
              <sa-dict :value="record.order_type" dict="app_goods_type"></sa-dict>
            </template>
            <template #pay_time="{ record }">
              <div class="text-xs">
                <p>支付金额：￥{{ record.pay_price }}</p>
                <p>支付方式：<sa-dict :value="record.pay_method" dict="app_pay_way"></sa-dict></p>
                <p>时间：{{ record.pay_time }}</p>
              </div>
            </template>
            <template #order_status="{ record }">
              <sa-dict :value="record.order_status" dict="app_order_status"></sa-dict>
            </template>
          </a-table>
        </div>
        <div class="mt-2 text-right" v-if="orderData.total > 0">
          <a-pagination
            :total="orderData.total"
            show-total
            @change="orderChangeHandler"
            v-model:current="orderParams['page']"
            :page-size="orderParams['limit']"
            style="display: inline-flex" />
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" title="余额变动">
        <div>
          <a-table :columns="billColumn" :data="billData.data" :pagination="false">
            <template #status="{ record }">
              <sa-dict :value="record.status" dict="app_pay_status"></sa-dict>
            </template>
            <template #type="{ record }">
              <sa-dict :value="record.type" dict="app_bill_type"></sa-dict>
            </template>
          </a-table>
        </div>
        <div class="mt-2 text-right" v-if="billData.total > 0">
          <a-pagination
            :total="billData.total"
            show-total
            @change="billChangeHandler"
            v-model:current="billParams['page']"
            :page-size="billParams['limit']"
            style="display: inline-flex" />
        </div>
      </a-tab-pane>
    </a-tabs>

    <!-- 表单信息 end -->
  </component>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import order from '../../api/order/order'
import bill from '../../api/app/bill'

const emit = defineEmits(['success'])
// 引用定义
const visible = ref(false)

let title = computed(() => {
  return '用户详情'
})

// 表单信息
const formData = ref({})

const billParams = ref({
  page: 1,
  limit: 10,
})
const billData = reactive({
  total: 0,
  data: [],
})
const billColumn = reactive([
  { title: '创建时间', dataIndex: 'create_time', width: 180 },
  { title: '订单编号', dataIndex: 'order_sn', width: 180 },
  { title: '交易用户', dataIndex: 'user.account', width: 120 },
  { title: '订单状态', slotName: 'status', width: 100 },
  { title: '订单类型', slotName: 'type', width: 100 },
  { title: '订单金额', dataIndex: 'money', width: 100 },
])

const orderParams = ref({
  page: 1,
  limit: 10,
})
const orderData = reactive({
  total: 0,
  data: [],
})
const orderColumn = reactive([
  { title: '下单时间|订单号', slotName: 'order_no', width: 180 },
  { title: '商品图片', slotName: 'cover_image', width: 100 },
  { title: '商品名称', slotName: 'goods_name', width: 250 },
  { title: '订单类型', slotName: 'order_type', width: 100 },
  { title: '支付信息', slotName: 'pay_time', width: 180 },
  { title: '订单状态', slotName: 'order_status', width: 120 },
])

// 打开弹框
const open = async (data) => {
  visible.value = true
  await initPage(data)
}

// 初始化页面数据
const initPage = async (data) => {
  formData.value = data
  loadOrderData()
  loadBillData()
}
const loadBillData = async () => {
  billParams.value.user_id = formData.value.id
  const resp = await bill.getPageList(billParams.value)
  billData.data = resp.data.data
  billData.total = resp.data.total
}
const billChangeHandler = async (currentPage) => {
  billParams.value['page'] = currentPage
  await loadBillData()
}

const loadOrderData = async () => {
  orderParams.value.user_id = formData.value.id
  const resp = await order.getPageList(orderParams.value)
  orderData.data = resp.data.data
  orderData.total = resp.data.total
}
const orderChangeHandler = async (currentPage) => {
  orderParams.value['page'] = currentPage
  await loadOrderData()
}

defineExpose({ open })
</script>
